<template>
  <div class="cart">
    <h3>购物车</h3>
    <div v-for="prod in cart" :key="prod.id">
      <span>{{ prod.id }}</span> -
      <span>{{ prod.title }}</span> -
      <span>{{ prod.price }}</span> -
      <span>{{ prod.count }}</span> -
      <span>{{ prod.price * prod.count }}</span> -
      <button @click="removeFromCart(prod.id)">删除</button>
    </div>

    <div>合计: {{ totalMoney }}</div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'pinia'
import useCartStore from '../store/shoppingcart'

export default {
  name: 'Cart',
  computed: {
    ...mapState(useCartStore, ['cart', 'totalMoney']),
  },
  methods: {
    ...mapActions(useCartStore, ['removeFromCart'])
  }
}
</script>

<style scoped>

</style>
